import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // home: AnimateTweenPage()
      // home: AnimatedButtonExample(),
      // home: ColorAnimationExample(),
      home: MultiPropertyAnimation(),
    );
  }
}

class MultiPropertyAnimation extends StatefulWidget {
  @override
  _MultiPropertyAnimationState createState() => _MultiPropertyAnimationState();
}

class _MultiPropertyAnimationState extends State<MultiPropertyAnimation> {
  bool _isExpanded = false;

  void _toggle() {
    setState(() {
      _isExpanded = !_isExpanded;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 宽度动画
            TweenAnimationBuilder<double>(
              duration: Duration(milliseconds: 600),
              tween: Tween<double>(begin: 100, end: _isExpanded ? 300 : 100),
              builder: (context, width, child) {
                return Container(
                  width: width,
                  height: 100,
                  color: Colors.blue,
                  margin: EdgeInsets.all(10),
                );
              },
            ),

            // 圆角动画
            TweenAnimationBuilder<double>(
              duration: Duration(milliseconds: 600),
              tween: Tween<double>(begin: 0, end: _isExpanded ? 50 : 0),
              builder: (context, borderRadius, child) {
                return Container(
                  width: 100,
                  height: 100,
                  decoration: BoxDecoration(
                    color: Colors.green,
                    borderRadius: BorderRadius.circular(borderRadius),
                  ),
                  margin: EdgeInsets.all(10),
                );
              },
            ),

            // 透明度动画
            TweenAnimationBuilder<double>(
              duration: Duration(milliseconds: 600),
              tween: Tween<double>(begin: 1.0, end: _isExpanded ? 0.5 : 1.0),
              builder: (context, opacity, child) {
                return Opacity(
                  opacity: opacity,
                  child: Container(
                    width: 100,
                    height: 100,
                    color: Colors.orange,
                    margin: EdgeInsets.all(10),
                  ),
                );
              },
            ),

            ElevatedButton(
              onPressed: _toggle,
              child: Text(_isExpanded ? '收缩' : '展开'),
            ),
          ],
        ),
      ),
    );
  }
}

class ColorAnimationExample extends StatefulWidget {
  @override
  _ColorAnimationExampleState createState() => _ColorAnimationExampleState();
}

class _ColorAnimationExampleState extends State<ColorAnimationExample> {
  Color _targetColor = Colors.blue;

  void _changeColor() {
    setState(() {
      _targetColor = _targetColor == Colors.blue ? Colors.red : Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TweenAnimationBuilder<Color?>(
          duration: Duration(seconds: 1),
          tween: ColorTween(begin: Colors.blue, end: _targetColor),
          builder: (context, color, child) {
            return Container(
              width: 200,
              height: 200,
              color: color,
              child: Center(
                child: ElevatedButton(
                  onPressed: _changeColor,
                  child: Text('切换颜色'),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

class AnimatedButtonExample extends StatefulWidget {
  @override
  _AnimatedButtonExampleState createState() => _AnimatedButtonExampleState();
}

class _AnimatedButtonExampleState extends State<AnimatedButtonExample> {
  double _targetSize = 24.0;

  void _toggleSize() {
    setState(() {
      _targetSize = _targetSize == 24.0 ? 48.0 : 24.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TweenAnimationBuilder<double>(
          duration: Duration(milliseconds: 500),
          tween: Tween<double>(begin: 0, end: _targetSize),
          builder: (context, size, child) {
            return IconButton(
              iconSize: size,
              icon: Icon(Icons.favorite),
              onPressed: _toggleSize,
            );
          },
        ),
      ),
    );
  }
}

class AnimateTweenPage extends StatefulWidget {
  @override
  _AnimateTweenPageState createState() => _AnimateTweenPageState();
}

class _AnimateTweenPageState extends State<AnimateTweenPage> {
  bool _isClick = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('动画示例'), elevation: 2),
      body: SizedBox.expand(
        child: Column(
          children: [
            TweenAnimationBuilder<double>(
              duration: Duration(seconds: 1),
              tween: Tween<double>(begin: 1, end: _isClick ? 1.5 : 1),
              builder: (context, scale, child) {
                return Transform.scale(scale: scale, child: child);
              },
              child: Icon(Icons.star, size: 50),
            ),
            SizedBox(height: 22),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _isClick = !_isClick;
                });
              },
              child: Text('执行'),
            ),
          ],
          mainAxisAlignment: MainAxisAlignment.center,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.refresh),
      ),
    );
  }

  //课程示例
  Column buildColumn() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TweenAnimationBuilder<double>(
          tween: Tween<double>(begin: 1.0, end: 0.4),
          duration: Duration(seconds: 2),
          builder: (BuildContext context, double? value, Widget? child) {
            return Transform.scale(
              scale: value,
              child: Container(color: Colors.red, width: 100, height: 100),
            );
          },
        ),
        TweenAnimationBuilder<Color?>(
          tween: ColorTween(begin: Colors.blue, end: Colors.red),
          duration: Duration(seconds: 2),
          builder: (BuildContext context, Color? value, Widget? child) {
            return Container(color: value, width: 100, height: 100);
          },
        ),

        TweenAnimationBuilder<Size?>(
          tween: SizeTween(begin: Size(100, 100), end: Size(50, 50)),
          duration: Duration(seconds: 2),
          builder: (BuildContext context, Size? value, Widget? child) {
            return Container(
              color: Colors.blue,
              width: value?.width,
              height: value?.height,
            );
          },
        ),

        TweenAnimationBuilder<BorderRadius?>(
          tween: BorderRadiusTween(
            begin: BorderRadius.only(topLeft: Radius.circular(10)),
            end: BorderRadius.only(topLeft: Radius.circular(10)),
          ),
          duration: Duration(seconds: 2),
          builder: (BuildContext context, BorderRadius? value, Widget? child) {
            return Container(
              decoration: BoxDecoration(
                borderRadius: value,
                color: Colors.blue,
              ),
              width: 200,
              height: 200,
            );
          },
        ),

        TweenAnimationBuilder<Border?>(
          tween: BorderTween(
            begin: Border.all(color: Colors.red, width: 4),
            end: Border.all(color: Colors.yellow, width: 1),
          ),
          duration: Duration(seconds: 2),
          builder: (BuildContext context, Border? value, Widget? child) {
            return Container(
              decoration: BoxDecoration(border: value, color: Colors.grey),
              width: 200,
              height: 200,
            );
          },
        ),

        GestureDetector(
          onTap: () {
            setState(() {
              _isExpanded = !_isExpanded;
            });
          },
          child: TweenAnimationBuilder<Size?>(
            tween: SizeTween(
              begin: Size(300, 80),
              end: _isExpanded ? Size(300, 200) : Size(300, 80),
            ),
            duration: Duration(milliseconds: 400),
            builder: (BuildContext context, Size? value, Widget? child) {
              return Container(
                width: value?.width,
                height: value?.height,
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black12,
                      blurRadius: 8,
                      offset: Offset(0, 2),
                    ),
                  ],
                ),
                child: Padding(
                  padding: EdgeInsetsGeometry.all(12),
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        Text(
                          "可展开的卡片 ",
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        if (_isExpanded) ...[
                          SizedBox(height: 20),
                          Text(
                            '这是卡片 的详细内容  当卡片是展开时会展示 出来，可以包含更多 的文本 图片或者 是其的wiget ',
                            style: TextStyle(color: Colors.grey),
                          ),
                          SizedBox(height: 20),
                          Text('当前是展开状态'),
                        ],
                      ],
                    ),
                  ),
                ),
              );
            },
          ),
        ),
      ],
    );
  }

  bool _isExpanded = false;
}
